<template>
	<view class="common">

		<uni-nav-bar color="#fff" background-color="rgba(255,255,255,0)" :border="false" left-icon="left" status-bar
			title="立即预约" @clickLeft="back" />
		<view class="main">


			<uni-forms ref="baseForm" :modelValue="baseFormData">
				<view class="form">
					<view class="info">
						<view class="title" style="border: none;">
							维修方式
						</view>
						<view>
							<uni-forms-item label="">
								<uni-data-checkbox v-model="baseFormData.type" :localdata="types" />
							</uni-forms-item>
						</view>



					</view>
					<view class="info2">
						<view class="title">
							客户信息
						</view>
						<view class="choose">
							<uni-forms-item label="车主姓名">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="联系方式">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="预约时间">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
							</uni-forms-item>
							<uni-forms-item label="取车位置" v-if="baseFormData.type == 1">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入取车位置" />
							</uni-forms-item>
							

						</view>


					</view>
					<view class="info2">
						<view class="title">
							车辆信息
						</view>
						<view class="choose">
							<uni-forms-item label="车辆类型">
								<uni-data-select v-model="carType" :localdata="range" @change="change"></uni-data-select>
								<!-- <uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" /> -->
							</uni-forms-item>
							<uni-forms-item label="车牌号">
								<uni-easyinput v-model="baseFormData.name" placeholder="请输入车牌号" />
							</uni-forms-item>


						</view>


					</view>


					<view class="info2">
						<view class="title">
							照片
						</view>
						<view class="choose">
							<uni-file-picker limit="9" title="整车照片"></uni-file-picker>
							<uni-file-picker limit="9" title="维修部部位图片"></uni-file-picker>



						</view>


					</view>
				</view>


			</uni-forms>
			
			
			
			  <!-- #ifdef MP -->
			  <view>
			    <button style="background-color: #406cf3;" type="primary" @click="submit('baseForm')">提交</button>
			  </view>
			  <!-- #endif -->
			
			  <!-- #ifndef MP -->
			  <view>
			    <button style="" type="primary" @click="submit('baseForm')">提交</button>
			  </view>
			  <!-- #endif -->
			
		








		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseFormData: {

					sex:2,
					name:null,
					type:0

				},
				carType:null,
				// 单选数据源
				types: [{
					text: '到门维修',
					value: 0
				}, {
					text: '上门取车',
					value: 1
				}],
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],

			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			submit(ref) {
							this.$refs[ref].validate().then(res => {
								console.log('success', res);
								uni.showToast({
									title: `校验通过`
								});
								uni.redirectTo({
									url: '/pacakgeRepair/pages/packageRepairBookSuccess/packageRepairBookSuccess'
								});
					
								
							}).catch(err => {
								console.log('err', err);
							})
						},

		}
	}
</script>

<style scoped>
	
	 /* #ifdef MP */
	 .common{
	 	 background-color: #fff;
	 }
	 /* #endif */

	
	
	/* #ifdef MP */
	.form {
		display: flex;
		flex-direction: column;
		row-gap: 30rpx;
	
	}
	/* #endif */
	
	/* #ifndef MP */
	.form {
		display: flex;
		flex-direction: column;
		row-gap: 20rpx;
	
	}
	/* #endif */
	
	

	.form>* {
		background-color: #fff;
		padding: 20rpx 20rpx;
		border-radius: 30rpx;
	}

	.info {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.title {
		padding-left: 0rpx;
		line-height: 72rpx;
		height: 72rpx;
		font-weight: bold;
		padding: 5rpx 0rpx;
		border-bottom: 5rpx solid #eee;

	}



	::v-deep .uni-forms-item {
		margin-bottom: 0rpx
	}

	::v-deep .uni-data-checklist {
		/* margin: auto 0!important; */
		margin-top: 10rpx ! important;

	}

	/* 改写单选框 样式 */
	::v-deep .checklist-group {
		display: flex !important;
		flex-direction: row !important;
		justify-content: flex-end !important;
	}

	/* 	::v-deep .info2 .uni-forms-item__label{
		padding: 0rpx;
		padding: auto;
		
	} */


	::v-deep .info2 .uni-forms-item__label {
		width: 150rpx !important;
		display: flex;
		padding: 0rpx;
		justify-content: center !important;
		align-items: center !important;
		background-color: aliceblue;
		margin-right: 10rpx;
		background-color: #4fa2ff;

		color: #fff;
		border-radius: 40rpx;
	}

	::v-deep .info2 .uni-forms-item__content .is-input-border {

		border-radius: 100rpx;
		background-color: #4fa2ff;
	}

	.choose {
		display: flex;
		flex-direction: column;
		padding: 10rpx 0rpx 0rpx 0rpx;
		row-gap: 30rpx;
		margin-top: 30rpx;

	}

	/* 	::v-deep .info2 .uni-forms-item__label uni-text span{
		background-color: #4da1ff;
		
		border-radius: 20rpx;
		color: #fff;
		width: 500rpx;
		padding: 10rpx;
	} */
	
	
	::v-deep uni-button {
	    border-radius: 30rpx;
	    background-color: #406cf3;
	}
	
	/* #ifdef MP */
	::v-deep .uni-forms-item__label{
		width: 0rpx !important;
		color: transparent;
		
	}
	
	.info,.info1,.info2{
		background-color: #fff;
		border-radius: 20rpx;
		padding-left: 20rpx;
	}
	.title{
		font-size: 28rpx;
	}
	/* #endif */
	
</style>